<!--登录界面-->
<template>
  <div :class="isPC ? 'bg2' : 'bg1'">
    <div class="img_box">
      <img src="../assets/imgs/login/circle.png" alt="">
      <img src="../assets/imgs/login/avater_default.png" alt="">
    </div>
    <div class="login_box">
     <el-form label-width='80px' :model='Loginform' :rules='rules' ref='loginRef'>
      <el-form-item prop='telephone'>
        <img src="../assets/imgs/login/phone.png">
        <el-input v-model='Loginform.telephone' placeholder="请输入手机号" :style="{'margin-top': isPC ? '35px' : '5px'}">
        </el-input>
      </el-form-item>
      <el-form-item prop='password'>
        <img src="../assets/imgs/login/password.png">
        <el-input v-model='Loginform.password' type='password' show-password placeholder="请输入密码"></el-input>
<!--        <el-button :class="isPC ? 'mailLoginWeb' : 'mailLogin'">短信登录</el-button>-->
      </el-form-item>
       <el-form-item prop='code'>
         <img src="../assets/imgs/login/code.png" style="width: 20px">
         <el-input v-model="Loginform.code" @keyup.enter='login' placeholder="请输入验证码"></el-input>
         <component :is="imageCode" :change="data.change_img_code" @click="changeImageCode" 
		 @getCode="backImageCode"></component>
       </el-form-item>

      <div class='item_button'>
        <el-button type='primary' @click='login' >登 录</el-button>
      </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import md5 from 'js-md5';
import {ref, reactive, onMounted, getCurrentInstance} from 'vue'
import {useRouter} from 'vue-router'
import { useStore } from 'vuex'
import imageCode from '../components/Imgcode';
import crypt from '../utils/encrypt'

const router = useRouter()
const store = useStore()
const { proxy } = getCurrentInstance()
let loginRef = ref(null)
let isPC = ref(false)
onMounted( () => {
  let deviceWidth = document.documentElement.clientWidth || window.innerWidth
  if (deviceWidth >= 750) {
    isPC.value = true
  }
  if (deviceWidth <= 320) {
    isPC.value = false
  }
})
// login表单数据绑定
const Loginform = reactive({
  'telephone': '', 'password': '', 'code': ''
})
// login表单数据验证
const rules = reactive({
  telephone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur'
    },
    {
      min: 3,
      message: '手机号长度至少要11个字符',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    },
    {
      min: 6,
      max: 255,
      message: '密码长度在6到25个字符',
      trigger: 'blur'
    }
  ],
  code: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur'
    }
  ]
})
const data = reactive({
  change_img_code: false, // 刷新验证码
  img_code:'',// 加密后的验证码值
})
// 刷新验证码操作
const changeImageCode = ()=> {
  data.change_img_code = !data.change_img_code
}

// 接收组件返回加密后的验证码值
const backImageCode = (code) =>{
  data.img_code = code
}

const role = ref('');
const tokenStr = ref('')
// 实现登录接受服务器消息
const login = () => {
  loginRef.value.validate(async valid => {
    if (!valid || !(md5(Loginform.code.toUpperCase()) === md5(data.img_code.toUpperCase()))) {
      changeImageCode()
      return proxy.$message.error('验证错误')
    } else {
      // console.log(md5(Loginform.password))
      const password = crypt.encrypt(md5(Loginform.password))
      // const password = Loginform.password
      // const password = Loginform.password
      // console.log({telephone: Loginform.telephone, password})
      const {data: result} = await proxy.$http.LogService.Login({telephone: Loginform.telephone, password})
      if (result.code !== 200) {
        proxy.$message.error('登录失败,请检查账密是否匹配')
        changeImageCode()
      } else {
        proxy.$message.success('登录成功')
        // 1.将登录成功之后的token保存到客户端的sessionStorage中
        //   1.1项目中出现登陆之外的API接口，必须在登录之后才能访问
        //   1.2token只应在当前网站打开期间生效，所以将token保存在sessionStorage中
        window.sessionStorage.setItem('token', result.data.tokenValue)
        // window.sessionStorage.setItem('isLogin', result.data.isLogin)
        role.value = result.data.tag
        tokenStr.value = result.data.tokenValue
        await store.dispatch('Login/setLoginStatus', true)
        await store.dispatch('Login/setToken', {token: tokenStr.value, role: role.value})
        window.sessionStorage.setItem('roles', store.state.Login.user.role)
        console.log(window.sessionStorage.getItem('roles'))
        // 2.通过编程式导航跳转到后台主页，路由地址是/home/welcome
		if(role.value=='menu'){
			await router.push({path: '/warehouse/loadingList'})
		}else if(role.value=='open'){
			await router.push({path: '/card/loadingList'})
		}else{
			await router.push({path: '/home/welcome'})
		}
        
      }
    }
  })
}
</script>

<style scoped>
.login_box {
  width: 5rem;
  background-color: white;
  height: 3rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  border-radius: 4%;
  padding: 15px;
  box-sizing: border-box;
}

.img_box {
  width: 26%;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
}

.img_box img:nth-child(1) {
  width: 110px;
  height: 110px;
  position: absolute;
  margin-left: -55px;
}

.img_box img:nth-child(2) {
  width: 70px;
  height: 70px;
  position: absolute;
  margin-left: -35px;
  margin-top: 15px;
}
.el-form-item{
  border-bottom: 1px solid black;
}
.el-form-item img{
  width: 15px;
  margin-left: -70px;
}
.el-form-item .el-input{
  width: 80%;
  margin-left: 5px;
  margin-top: 5px;
}
:deep(.el-form-item .el-input__wrapper) {
  box-shadow: none;
}
.item_button {
  width: 100%;
  text-align: center;
  margin-top: -0.3rem;
}
.el-button {
  width: 90%;
  color: white;
  border-radius: 0.5em;
  background: -moz-linear-gradient(top, #cbaa74 20%, #ab8649 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cbaa74), color-stop(100%,#ab8649));
  background: -webkit-linear-gradient(top, #cbaa74 20%,#ab8649 100%);
  background: -o-linear-gradient(top, #cbaa74 20%,#ab8649 100%);
  background: -ms-linear-gradient(top, #cbaa74 20%,#ab8649 100%);
  background: linear-gradient(to bottom, #cbaa74 20%,#ab8649 100%);
  font-size: 0.3rem;
}
.mailLogin {
  width: 45%;
  font-size: 0.25rem;
  height: 25px;
  padding: 2px
}
.mailLoginWeb {
  width: 20%;
  font-size: 0.13rem;
  height: 35px;
  padding: 2px
}
.bg1{
  width: 100%;
  height: 100%;
  background-image: url("../assets/imgs/login/adminBG.jpg");
  background-size: cover;
  position: relative;
}
.bg2{
  width: 100%;
  height: 100%;
  background-image: url("../assets/imgs/login/adminBGWeb.jpg");
  background-size: cover;
  position: relative;
}
</style>
